  <div class="tool-bar">
  <div class="button-bar">
    <span>
      <B>区域：</B><select><option value ="volvo">乌江</option></select>
      <B>电站：</B><select><option value ="volvo">洪家渡</option></select>
      <B>机组：</B><select><option value ="volvo">#1</option></select>
    </span>

  </div>
  <div class="time-ctrl">
    <button class="btn btn-sm btn-default" (click)="goBack(true)"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
    <!--<button class="btn btn-sm btn-default" (click)="goBack()"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></button>-->
  </div>
  <div class="search-bar">
    <app-time-control-search></app-time-control-search>
  </div>
</div>
<div class="main-body">
  <div class="container-fluid">
    <div id="tabs">
      <tabset>
        <tab heading="振动" [customClass]="'tab'">
          <div class="row">
            <div class="col-sm-2 check-box"style="margin-top: 10px;">
              <div style="border: 1px dashed black">
                <div class="checkbox ">
                  <label>
                    <input type="checkbox" name="vibration-1" value="1" (click)="judgeCheck(0,this,'vibration-1')" checked>顶盖X向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-1" value="2" (click)="judgeCheck(0,this,'vibration-1')">顶盖Y向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-1" value="3" (click)="judgeCheck(0,this,'vibration-1')">顶盖垂直振动
                  </label>
                </div>
              </div>
              <div style="border: 1px dashed black">
                <div class="checkbox ">
                  <label>
                    <input type="checkbox" name="vibration-2" value="1" (click)="judgeCheck(0,this,'vibration-2')">上机架X向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-2" value="2" (click)="judgeCheck(0,this,'vibration-2')">上机架Y向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-2" value="3" (click)="judgeCheck(0,this,'vibration-2')">上机架垂直振动
                  </label>
                </div>
              </div>
              <div style="border: 1px dashed black">
                <div class="checkbox ">
                  <label>
                    <input type="checkbox" name="vibration-3" value="1" (click)="judgeCheck(0,this,'vibration-3')">下机架X向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-3" value="2" (click)="judgeCheck(0,this,'vibration-3')">下机架Y向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-3" value="3" (click)="judgeCheck(0,this,'vibration-3')">下机架垂直振动
                  </label>
                </div>
              </div>
              <div style="border: 1px dashed black">
                <div class="checkbox ">
                  <label>
                    <input type="checkbox" name="vibration-4" value="1" (click)="judgeCheck(0,$event,'vibration-4')">定子机架X向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-4" value="2" (click)="judgeCheck(0,$event,'vibration-4')">定子机架Y向水平振动
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-4" value="3" (click)="judgeCheck(0,$event,'vibration-4')">定子机架轴向振动
                  </label>
                </div>
              </div>
              <div style="border: 1px dashed black">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="vibration-5" value="1" (click)="judgeCheck(0,this,'vibration-5')">定子铁心振动
                  </label>
                </div>
              </div>
            </div>
            <div class="col-sm-9 margtop">
              <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-2">
                  <div class="checkbox">
                    <label class="checkbox-inline">
                      <input type="checkbox" value="option1">负荷
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" value="option2">水头
                    </label>
                  </div>
                </div>
                <div class="col-sm-6"></div>
                <div class="col-sm-3">
                  <button type="button" class="btn btn-default" (click)="linediag(0)" [class.active]="!diag[0]">折线图</button>
                  <button type="button" class="btn btn-default" (click)="scatterdiag(0)" [class.active]="diag[0]">散点图</button>
                </div>
              </div>
              <div *ngIf="!diag[0]">
                <app-chart-line-diagram [data]="data1"></app-chart-line-diagram>
              </div>
              <div *ngIf="diag[0]">
                <app-chart-scatter-diagram [data]="scatterData" [title]="''"></app-chart-scatter-diagram>
              </div>
            </div>
          </div>
        </tab>
        <tab heading="摆度" [customClass]="'tab'">
          <div class="row">
            <div class="col-sm-2 check-box"style="margin-top: 70px;">
              <div style="border: 1px dashed black;">
                <div class="checkbox"style="margin-top: 20px;margin-bottom: 20px">
                  <label>
                    <input type="checkbox" name="swing-1" value="1" (click)="judgeCheck(1,this,'swing-1')">上导X向摆度
                  </label>
                </div>
                <div class="checkbox"style="margin-top: 20px;margin-bottom: 20px">
                  <label>
                    <input type="checkbox" name="swing-1" value="2" (click)="judgeCheck(1,this,'swing-1')">上导Y向摆度
                  </label>
                </div>
              </div>
              <div style="border: 1px dashed black">
                <div class="checkbox"style="margin-top: 20px;margin-bottom: 20px">
                  <label>
                    <input type="checkbox" name="swing-2" value="3" (click)="judgeCheck(1,this,'swing-2')">下导X向摆度
                  </label>
                </div>
                <div class="checkbox"style="margin-top: 20px;margin-bottom: 20px">
                  <label>
                    <input type="checkbox" name="swing-2" value="4" (click)="judgeCheck(1,this,'swing-2')">下导Y向摆度
                  </label>
                </div>
              </div>
              <div style="border: 1px dashed black">
                <div class="checkbox"style="margin-top: 20px;margin-bottom: 20px">
                  <label>
                    <input type="checkbox" name="swing-3" value="5" (click)="judgeCheck(1,this,'swing-3')">水导X向摆度
                  </label>
                </div>
                <div class="checkbox"style="margin-top: 20px;margin-bottom: 20px">
                  <label>
                    <input type="checkbox" name="swing-3" value="6" (click)="judgeCheck(1,this,'swing-3')">水导Y向摆度
                  </label>
                </div>
              </div>
            </div>
            <div class="col-sm-9 margtop">
              <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-2">
                  <div class="checkbox">
                    <label class="checkbox-inline">
                      <input type="checkbox" value="option1">负荷
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" value="option2">水头
                    </label>
                  </div>
                </div>
                <div class="col-sm-6"></div>
                <div class="col-sm-3">
                  <button type="button" class="btn btn-default" (click)="linediag(1)" [class.active]="!diag[1]">折线图</button>
                  <button type="button" class="btn btn-default" (click)="scatterdiag(1)" [class.active]="diag[1]">散点图</button>
                </div>
              </div>
              <div *ngIf="!diag[1]">
                <app-chart-line-diagram [data]="data4"></app-chart-line-diagram>
              </div>
              <div *ngIf="diag[1]">
                <app-chart-scatter-diagram [data]="scatterData" [title]="''"></app-chart-scatter-diagram>
              </div>
            </div>
          </div>
        </tab>
        <tab heading="压力脉动" [customClass]="'tab'">
          <div class="row">
            <div class="col-sm-2 check">
              <br><br><br><br><br>
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="pressure-fluctuation" value="1">蜗壳进口压力脉动
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="pressure-fluctuation" value="2">导叶-转轮间压力脉动
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="pressure-fluctuation" value="3">顶盖-转轮间压力脉动
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="pressure-fluctuation" value="4">尾水管进口压力脉动
                </label>
              </div>
            </div>
            <div class="col-sm-9 margtop">
              <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-2">
                  <div class="checkbox">
                    <label class="checkbox-inline">
                      <input type="checkbox" value="option1">负荷
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" value="option2">水头
                    </label>
                  </div>
                </div>
                <div class="col-sm-6"></div>
                <div class="col-sm-3">
                  <button type="button" class="btn btn-default" (click)="linediag(2)" [class.active]="!diag[2]">折线图</button>
                  <button type="button" class="btn btn-default" (click)="scatterdiag(2)" [class.active]="diag[2]">散点图</button>
                </div>
              </div>
              <div *ngIf="!diag[2]">
                <app-chart-line-diagram [data]="data4"></app-chart-line-diagram>
              </div>
              <div *ngIf="diag[2]">
                <app-chart-scatter-diagram [data]="scatterData" [title]="''"></app-chart-scatter-diagram>
              </div>
            </div>
          </div>
        </tab>
        <tab heading="温度" [customClass]="'tab'">
          <div class="row">
            <div class="col-sm-2 check">
              <br><br><br>
              <div class="radio">
                <label>
                  <input type="radio" name="temperature" value="1" (click)="judgeCheck2(1)" checked>定子铁芯温度
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="temperature" value="2" (click)="judgeCheck2(2)">定子线棒温度
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="temperature" value="3" (click)="judgeCheck2(3)">上导轴承瓦温
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="temperature" value="4" (click)="judgeCheck2(4)">下导轴承瓦温
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="temperature" value="5" (click)="judgeCheck2(5)">水导轴承瓦温
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="temperature" value="6" (click)="judgeCheck2(6)">推力轴承瓦温
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="temperature" value="7" (click)="judgeCheck2(7)">集电环温度
                </label>
              </div>

            </div>
            <div class="col-sm-9 margtop" >
              <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-2">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" value="1">负荷
                    </label>
                  </div>
                </div>
                <div class="col-sm-6"></div>
                <div class="col-sm-3">
                  <button type="button" class="btn btn-default" (click)="linediag(3)" [class.active]="!diag[3]">折线图</button>
                  <button type="button" class="btn btn-default" (click)="scatterdiag(3)" [class.active]="diag[3]">散点图</button>
                </div>
              </div>
              <div *ngIf="!diag[3]">
                <app-chart-line-diagram [data]="data4"></app-chart-line-diagram>
              </div>
              <div *ngIf="diag[3]">
                <app-chart-scatter-diagram [data]="scatterData" [title]="''"></app-chart-scatter-diagram>
              </div>
            </div>
          </div>



        </tab>
      </tabset>
    </div>
    <div>
      <button type="button" class="btn btn-default btn-style" (click)="navigator()">趋势预测</button>
    </div>



  </div>
</div>
